<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>throttle 演示</title>
<style>
    #div1 {
        border: 1px solid #ccc;
        width: 200px;
        height: 100px;
    }
</style>
</head>
<body>
<div id="div1" draggable="true">可拖拽</div>

<script>
// TODO: 节流应用场景: 拖拽一个元素时, 要随时拿到该元素被拖拽的位置
// 直接用 drag 事件, 则会频繁触发, 很容易导致卡顿
// 节流: 无论拖拽速度多快, 都会每隔 100ms 触发一次 (频繁操作的时候, 保持一个频率连续触发)

const div1 = document.getElementById('div1')
// let timer = null
// div1.addEventListener('drag', function (e) {
    // 拖拽连续被触发, 只要 timer 有值, 就return
//     if (timer) {
//         return
//     }
//     timer = setTimeout(() => {
//         console.log(e.offsetX, e.offsetY)

//         timer = null
//     }, 100)
// })

// 节流
function throttle(fn, delay = 5000) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))

// div1.addEventListener('drag', function(event) {

// })
</script>
</body>
</html>